<template>
  <div id="DeviceTree" style="width: 100%; height: 100%; background-color: #ffffff; overflow: auto">
    <el-container>
      <el-header>设备列表</el-header>
      <el-main style="background-color: #ffffff">
        <div class="device-tree-main-box">
          <el-tree :data="departmentData" :props="departmentProps" @node-click="departmentClick"
            @node-contextmenu="departmentContextMenu">
            <span class="custom-tree-node" style="display: flex; align-items: center" slot-scope="{ data }">
              <div v-if="contextmenuShow == data.channelId" class="contextmenu-content">
                <div class="contextmenu-item" @click.stop="clickContextmenu(2, data)">
                  船舶信息
                </div>
                <div class="contextmenu-item" @click.stop="clickContextmenu(0, data)">
                  告警信息
                </div>
                <div class="contextmenu-item" @click.stop="clickContextmenu(1, data)">
                  录像回放
                </div>
              </div>
              <div v-if="data.kind != 1 && data.kind != 2 && data.kind != 0"
                :class="data.status ? 'statusOnline' : 'statusOffline'"></div>
              <i v-if="data.kind == 1" class="el-icon-ship"></i>
              <img v-else-if="data.kind == 2" src="../../assets/fleet-icon.png" style="width: 16px; height: 16px" />
              <i v-else-if="data.kind == 0" class="el-icon-office-building"></i>
              <i v-else class="el-icon-video-camera"></i>
              <span style="font-size: 14px; margin-left: 2px">{{
                data.deptName
                }}</span>
            </span>
          </el-tree>
          <el-tree ref="gdTree" :props="defaultProps" :load="loadNode" lazy class="device-tree"
            @node-click="handleNodeClick" @node-contextmenu="handleContextMenu" node-key="id"
            style="min-width: 100%; display: inline-block !important">
            <span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%">
              <span v-if="node.data.type === 0 && node.data.online" title="在线设备"
                class="device-online iconfont icon-jiedianleizhukongzhongxin2"></span>
              <span v-if="node.data.type === 0 && !node.data.online" title="离线设备"
                class="device-offline iconfont icon-jiedianleizhukongzhongxin2"></span>
              <span v-if="node.data.type === 2 && node.data.online" title="目录"
                class="device-online iconfont icon-jiedianleilianjipingtai"></span>
              <span v-if="node.data.type === 2 && !node.data.online" title="目录"
                class="device-offline iconfont icon-jiedianleilianjipingtai"></span>
              <span v-if="node.data.type === 3 && node.data.online" title="在线通道"
                class="device-online iconfont icon-shebeileijiankongdian"></span>
              <span v-if="node.data.type === 3 && !node.data.online" title="在线通道"
                class="device-offline iconfont icon-shebeileijiankongdian"></span>
              <span v-if="node.data.type === 4 && node.data.online" title="在线通道-球机"
                class="device-online iconfont icon-shebeileiqiuji"></span>
              <span v-if="node.data.type === 4 && !node.data.online" title="在线通道-球机"
                class="device-offline iconfont icon-shebeileiqiuji"></span>
              <span v-if="node.data.type === 5 && node.data.online" title="在线通道-半球"
                class="device-online iconfont icon-shebeileibanqiu"></span>
              <span v-if="node.data.type === 5 && !node.data.online" title="在线通道-半球"
                class="device-offline iconfont icon-shebeileibanqiu"></span>
              <span v-if="node.data.type === 6 && node.data.online" title="在线通道-枪机"
                class="device-online iconfont icon-shebeileiqiangjitongdao"></span>
              <span v-if="node.data.type === 6 && !node.data.online" title="在线通道-枪机"
                class="device-offline iconfont icon-shebeileiqiangjitongdao"></span>
              <span v-if="node.data.online" style="padding-left: 1px" class="device-online">{{ node.label }}</span>
              <span v-if="!node.data.online" style="padding-left: 1px" class="device-offline">{{ node.label }}</span>
              <span>
                <i v-if="node.data.hasGPS && node.data.online" style="color: #9d9d9d"
                  class="device-online iconfont icon-dizhi"></i>
                <i v-if="node.data.hasGPS && !node.data.online" style="color: #9d9d9d"
                  class="device-offline iconfont icon-dizhi"></i>
              </span>
            </span>
          </el-tree>
        </div>
      </el-main>
    </el-container>

    <!-- 查看船舶 -->
    <el-dialog title="船舶信息" :visible.sync="shipMessageShow" width="70%">
      <div class="popup-content">
        <div class="popup-title">船公司信息</div>
        <div class="popup-box">
          <div class="popup-item">
            <span style="color: #000">管理公司：</span>{{ shipMessageObj.pcompany || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">管理公司地址：</span>{{ shipMessageObj.pcompanyAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">管理公司联系人：</span>{{ shipMessageObj.pcontact || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人电话：</span>{{ shipMessageObj.pcontactPhone || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人地址：</span>{{ shipMessageObj.pcontactAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人传真：</span>{{ shipMessageObj.pcontactFax || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人邮箱：</span>{{ shipMessageObj.pcontactEmail || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人备注：</span>{{ shipMessageObj.pcontactRemark || "--" }}
          </div>
        </div>
      </div>
      <div class="popup-content">
        <div class="popup-title">船东信息</div>
        <div class="popup-box">
          <div class="popup-item">
            <span style="color: #000">船东名称：</span>{{ shipMessageObj.owner || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船东具体地址：</span>{{ shipMessageObj.ownerAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人姓名：</span>{{ shipMessageObj.ownerContact || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人电话</span>{{ shipMessageObj.ownerContactPhone || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人地址：</span>{{ shipMessageObj.ownerContactAddress || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人传真：</span>{{ shipMessageObj.ownerContactFax || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人邮箱：</span>{{ shipMessageObj.ownerContactEmail || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">联系人备注：</span>{{ shipMessageObj.ownerContactRemark || "--" }}
          </div>
        </div>
      </div>
      <div class="popup-content">
        <div class="popup-title">船舶信息</div>
        <div class="popup-box">
          <div class="popup-item">
            <span style="color: #000">船舶名称：</span>{{ shipMessageObj.deptName || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶英文名称：</span>{{ shipMessageObj.enName || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶IMO号：</span>{{ shipMessageObj.imo || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶统一识别号：</span>{{ shipMessageObj.identification || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船旗国：</span>{{ shipMessageObj.country || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船籍港：</span>{{ shipMessageObj.port || "--" }}
          </div>
          <!-- <div class="popup-item">
            <span style="color: #000">Ai识别Id：</span>{{ shipMessageObj.boxId || "--" }}
          </div> -->
          <div class="popup-item">
            <span style="color: #000">船舶状态：</span>{{ shipMessageObj.status == 0 ? "启用" : "禁用" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶MMSI：</span>{{ shipMessageObj.mmsi || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">船舶NMMSI：</span>{{ shipMessageObj.nmmsi || "--" }}
          </div>
          <div class="popup-item">
            <span style="color: #000">备注：</span>{{ shipMessageObj.remark || "--" }}
          </div>
        </div>
      </div>
      <div class="image-content">
        <img :src="domain + shipMessageObj.fileUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DeviceService from "../service/DeviceService.js";

  export default {
    name: "DeviceTree",
    data() {
      return {
        shipMessageObj: {},
        domain: JSON.parse(localStorage.getItem("userInfo")).domain,
        shipMessageShow: false,
        contextmenuShow: "-1",
        departmentData: [],
        departmentProps: {
          children: "children",
          label: "deptName",
        },
        deviceService: new DeviceService(),
        defaultProps: {
          children: "children",
          label: "name",
          isLeaf: "isLeaf",
        },
      };
    },
    props: ["device", "onlyCatalog", "clickEvent", "contextMenuEvent", "isMap"],
    mounted() {
      this.getDepartment();
    },
    methods: {
      clickContextmenu(type, data) {
        const that = this;
        let url = "";
        this.contextmenuShow = -1;
        if (type == 0) {
          // 告警信息
          url = `/#/alarm`;
        } else if (type == 1) {
          // 录像回放
          url = `/#/gbRecordDetail/${data.deviceId}/${data.channelId}`;
        } else if (type == 2) {
          // 船舶信息
          that
            .$axios({
              method: "get",
              url: `/api/department/get-by-id?id=` + data.id,
            })
            .then((res) => {
              if (res.data.code == 0) {
                console.log(res.data);

                that.shipMessageShow = true;
                this.shipMessageObj = res.data.data;
                return;
              }
              that.$message.error(that.data.msg);
            });
          return;
        }
        window.open(url, "_blank");
      },
      departmentContextMenu(data, node, element) {
        if (node.kind != 0 && node.kind != 1 && node.kind != 2) {
          // this.contextmenuShow = node.channelId
          this.contextmenuShow == -1
            ? (this.contextmenuShow = node.channelId)
            : (this.contextmenuShow = -1);
        } else {
          this.contextmenuShow = -1;
        }

        // this.$router.push(`/gbRecordDetail/${node.deviceId}/${node.channelId}`)
        // let url = `/#/gbRecordDetail/${node.deviceId}/${node.channelId}`;
        // window.open(url, "_blank");
      },
      // 获取部门树
      getDepartment() {
        const that = this;
        that
          .$axios({
            method: "get",
            url: `/api/department/tree`,
          })
          .then((res) => {
            if (res.status == 200) {
              that.departmentData = res.data.data;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      // 点击部门树
      departmentClick(data, node, element) {
        const that = this;
        if (data.kind == 1) {
          this.$emit('custom-event', data);
        }
        this.contextmenuShow = -1;
        if (data.children == undefined) {
          let deviceNode = this.$refs.gdTree.getNode(data.deviceId);
          this.clickEvent(deviceNode.data, data, data.type === 2);
          return;
        }
        console.log(this.isMap);

        if (this.isMap) return
        if (data.children.length == 0) {
          that
            .$axios({
              method: "get",
              url: `/api/department/channels/dept-id?id=` + data.id,
            })
            .then((res) => {
              if (res.data.code == 0) {
                if (res.data.data.length > 0) {
                  data.children = res.data.data.map((item) => {
                    return {
                      ...item,
                      cameraShow: true,
                      deptName: item.name,
                    };
                  });
                  node.expanded = true;
                }
                return;
              }
              this.$message.error(res.data.msg);
            })
            .catch((error) => {
              console.log(error);
            });
        }
      },

      handleNodeClick(data, node, element) {

        let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId);
        if (typeof this.clickEvent == "function") {
          this.clickEvent(
            deviceNode.data.userData,
            data.userData,
            data.type === 2
          );
        }
      },
      handleContextMenu(event, data, node, element) {
        console.log("右键点击事件");
        let deviceNode = this.$refs.gdTree.getNode(data.userData.deviceId);
        if (typeof this.contextMenuEvent == "function") {
          this.contextMenuEvent(
            deviceNode.data.userData,
            event,
            data.userData,
            data.type === 2
          );
        }
      },
      loadNode: function (node, resolve) {
        console.log(this.device);
        if (node.level === 0) {
          if (this.device) {
            let node = {
              name: this.device.name || this.device.deviceId,
              isLeaf: false,
              id: this.device.deviceId,
              type: this.device.online,
              online: this.device.online === 1,
              userData: this.device,
            };
            resolve([node]);
          } else {
            this.deviceService.getAllDeviceList(
              (data) => {
                console.log(data);
                if (data.length > 0) {
                  let nodeList = [];
                  for (let i = 0; i < data.length; i++) {
                    console.log(data[i].name);
                    let node = {
                      name: data[i].name || data[i].deviceId,
                      isLeaf: false,
                      id: data[i].deviceId,
                      type: data[i].online,
                      online: data[i].online === 1,
                      userData: data[i],
                    };
                    nodeList.push(node);
                  }
                  resolve(nodeList);
                } else {
                  resolve([]);
                }
              },
              (list) => {
                console.log("设备加载完成");
              },
              (error) => { }
            );
          }
        } else {
          let channelArray = [];

          this.deviceService.getTree(
            node.data.userData.deviceId,
            node.data.id,
            this.onlyCatalog,
            (catalogData) => {
              console.log(catalogData);
              channelArray = channelArray.concat(catalogData);
              this.channelDataHandler(channelArray, resolve);
            },
            (endCatalogData) => { }
          );
        }
      },
      channelDataHandler: function (data, resolve) {
        if (data.length > 0) {
          let nodeList = [];
          for (let i = 0; i < data.length; i++) {
            let item = data[i];
            let type = 3;
            if (item.id.length <= 10) {
              type = 2;
            } else {
              if (item.id.length > 14) {
                let channelType = item.id.substring(10, 13);
                console.log("channelType: " + channelType);
                if (channelType === "215" || channelType === "216") {
                  type = 2;
                }
                console.log(type);
                if (item.basicData.ptzType === 1) {
                  // 1-球机;2-半球;3-固定枪机;4-遥控枪机
                  type = 4;
                } else if (item.basicData.ptzType === 2) {
                  type = 5;
                } else if (
                  item.basicData.ptzType === 3 ||
                  item.basicData.ptzType === 4
                ) {
                  type = 6;
                }
              } else {
                if (
                  item.basicData.subCount > 0 ||
                  item.basicData.parental === 1
                ) {
                  type = 2;
                }
              }
            }
            let node = {
              name: item.name || item.basicData.channelId,
              isLeaf: type !== 2,
              id: item.id,
              deviceId: item.deviceId,
              type: type,
              online: item.basicData.status === 1,
              hasGPS: item.basicData.longitude * item.basicData.latitude !== 0,
              userData: item.basicData,
            };
            nodeList.push(node);
          }
          resolve(nodeList);
        } else {
          resolve([]);
        }
      },
      reset: function () {
        this.$forceUpdate();
      },
    },
    destroyed() {
      // if (this.jessibuca) {
      //   this.jessibuca.destroy();
      // }
      // this.playing = false;
      // this.loaded = false;
      // this.performance = "";
    },
  };
</script>

<style>
  .device-tree-main-box {
    text-align: left;
  }

  .device-online {
    color: #252525;
  }

  .device-offline {
    color: #727272;
  }

  .device-tree {
    position: fixed;
    top: -200px;
    left: -200px;
    z-index: -10;
  }

  .el-tree-node:focus>.el-tree-node__content {
    color: #fff;
    background-color: #40a9ff !important;
  }

  .statusOnline,
  .statusOffline {
    width: 8px;
    height: 8px;
    padding: 0px !important;
    border-radius: 50%;
    margin-right: 6px;
  }

  .statusOnline {
    background-color: #00ff00;
  }

  .statusOffline {
    background-color: #ff0000;
  }

  .contextmenu-content {
    position: absolute;
    background: #fff;
    padding: 10px 0;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.4);
  }

  .contextmenu-content .contextmenu-item {
    padding: 4px 12px;
  }

  .contextmenu-content .contextmenu-item:hover {
    background-color: #cacaca;
  }
</style>
